<template>
	<view>
		<view class="select" @click="handleShow($attrs)"
			:style="$attrs.disabled?'background-color:rgb(245, 247, 250)':''">
			<view class="p-l-5 textmp-1">
				{{selectDictLabel(...columns,modelValue,',',{dictValue:keyValue,dictLabel:keyName}) || modelValue || placeholder + ( $attrs?.label ?? '') }}
			</view>
		</view>
		<u-picker closeOnClickOverlay :show="show" :columns="columns" @cancel="show=false" @close="show=false"
			@confirm="handleConfirm" :keyName="keyName" :defaultIndex="pickerDefault(...columns, modelValue, keyValue)"
			v-bind="$attrs"></u-picker>
	</view>
</template>

<script setup>
	const props = defineProps({
		modelValue: [String, Number],
		placeholder: {
			type: String,
			default: '请选择',
		},
		columns: {
			type: Array,
			default: () => [],
		},
		keyName: {
			type: String,
			default: 'dictLabel',
		},
		keyValue: {
			type: String,
			default: 'dictValue',
		}
	})

	const emits = defineEmits(["update:modelValue"]);

	const show = ref(false)

	function handleConfirm(e) {
		const val = e.value[0]
		emits("update:modelValue", val[props.keyValue])
		show.value = false
	}

	function handleShow(val) {
		if (!val.disabled) {
			show.value = true
		}
	}
</script>

<style scoped lang="scss">
	.select {
		padding: 10rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 8rpx;
	}
</style>